/* responsive */
@media (max-width:1200px) {
    .col-1{
        display:flex;
        flex-direction:column;
        width:25rem;
        padding:3rem;
        gap:1rem;
        align-items:center;
        text-align:center;
    }
    .col-2 img{
        width:20rem;
        cursor:pointer;
        padding-top:5rem;
    }
}
@media (max-width:1000px){
    .header{
        position:relative;
    }
    .mobile-navbar-btn{
        display:block;
        width:2rem;
        height:2rem;
        z-index:9999;
        border:2px solid black;
        color:#000;
    }
    .mobile-navbar-btn .icon{
        width:2rem;
        height:2rem;
        color:black;
    }
    .mobile-nav-icon[name="close-outline"]{
        display:none;
    }
    .header .logo{
        width:20%;
    }
    .nav{
        display:none;
        width:100%;
        height:100vh;
        position:absolute;
        top:0;
        left:0;
        background:var(--bg);
        transform: translateX(100%);
        transition: all 0.5s linear;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    } 
    .active .nav{
        transform: translateX(0%);
        transition: all 0.2s linear;
        opacity:1;
        display:flex;
        visibility:visible;
        pointer-events: auto;
    }
    .active .mobile-nav-icon[name="menu-outline"]{
        display:none;
    }
    .active .mobile-nav-icon[name="close-outline"]{
        display:block;
    }
    .nav ul{
        width:40rem;
        padding-top:4rem;
        gap:2rem;
        flex-direction:column;
    }
    .three-column {
        display:grid;
        width:100%;
        grid-template-columns: repeat(2,1fr);
        gap:3rem;
    } 
    .Counter,
    .four-column{
        display:grid;
        background:var(--para);
        grid-template-columns:repeat(2,1fr);
        color:white;
    }
    .f_section{
        display:grid;
        padding:4rem;
        justify-content:center;
        background: #000;
        color:white;
        gap:8rem;
        grid-template-columns:repeat(2,1fr); 
    }
    .two-column{
        background-color: var(--bg);
        display:flex;
        align-items: center;;
        flex-direction:row;
        padding:2rem 0rem;
        gap:0rem;
        grid-template-columns:repeat(1,1fr);
        flex-direction: column;
    }
    .col-1{
        display:flex;
        flex-direction:column;
        width:30rem;
        padding:2rem;
        gap:1rem;
        align-items:center;
        text-align:center;
    }
    .col-1 h1{
        font-size:3rem;
        margin:0 auto;

    }
    .col-1 p{
        font-size: 26px;
        margin:0 auto;
        padding:auto;
    }
    .btn:hover{
        transform:scale(1.1);
        transition: all 0.5s;
        cursor: pointer;
    }
    .col-2 img{
        width:24rem;
        cursor:pointer;
    }
    .clients-msg{
        font-size:16px;
        padding-top:2rem;
        max-width:30rem;
        height:7rem;
        border-radius:30px; 
    }
    .clients-msg-h::before{
        content:"\f10e";
        position:absolute;
        top:4rem;
        left:60%;
        font-size:3rem;
        color:#77668f;
        font-family:"font awesome 6 free";
        font-weight:900;
    }
    .clients-msg-h::after{
        content:"\f10d";
        position:absolute;
        color:#77668f;
        top:0;
        left:5%;
        font-size:3rem;
        font-family:"font awesome 6 free";
        font-weight:900;
    }
} 
@media (max-width:600px){
    .col-1{
        display:flex;
        flex-direction:column;
        width:20rem;
        padding:5rem ;
        justify-content:space-between;
        gap:2rem;
        align-items:center;
        text-align:center;
    }
    .col-2 img{
        width:20rem;
        cursor:pointer;
        padding-top:5rem;
    }
    .three-column {
        display:grid;
        width:100%;
        grid-template-columns: repeat(1,1fr);
        gap:1rem;
    } 
    .item-container{
        display:flex;
        flex-direction:column;
    }
    .Counter,
    .four-column{
        display:grid;
        background:var(--para);
        grid-template-columns:repeat(1,1fr);
        color:white;
    }
    .f_section{
        display:grid;
        padding:4rem;
        align-items: center;
        justify-content:center;
        background: #000;
        color:white;
        gap:3rem;
        grid-template-columns:repeat(1,1fr); 
    }
}
@media (max-width:450px){
    .two-column{
        padding:0rem 0rem;
    }
    .col-1{
        width:20rem;
        padding:0rem;
        gap:rem;
        align-items:center;
        text-align:center;
    }
    .col-1 h1{
        font-size:3rem;
        margin:0 auto;

    }
    .col-1 p{
        font-size: 26px;
        margin:0 auto;
        padding:auto;
    }
    .common-heading{
        font-size:2rem;
        color:#0b0119;
        position:relative;
        font-weight: 600;
    }
    .common-heading::before{
        content:"";
        top:105%;
        left:0%;
        width:1.3rem;
        height:1.3rem;
        border-radius:100%;
        position:absolute;
        background: #245437;
    }
    .common-heading::after{
        content:"";
        top:116%;
        left:0%;
        width:16rem;
        height:0.5rem;
        position:absolute;
        background:  #245437;
    }
    .description p{
        padding:1rem 1rem;
        max-width:100rem;
    }
}